<template>
  <div class="agentcenter page">
    <div class="header">
      <van-nav-bar
          title="援助交际"
          left-arrow
          @click-left="$router.back()"
      />
      <div class="user-wrapper">
        <van-image round :src="userInfo.header_img" width="50px" height="50px"/>
        <div class="userinfo">
          <div class="username">{{ userInfo.username }}</div>
          <div class="balance">账户余额 : {{ userInfo.money }}</div>
        </div>
      </div>
    </div>
    <div class="items-bar">
      <div class="myqrcode" @click="$router.push({ name: 'QRCode' })"><i class="van-badge__wrapper van-icon van-icon-undefined iconfont-ewm"
                               style="font-size: 20px;"></i>
        <p>我的二维码</p></div>
      <div class="member" @click="$router.push({ name: 'AgentMember'})"><i class="van-badge__wrapper van-icon van-icon-undefined iconfont-hycy"
                             style="font-size: 20px;"></i>
        <p>推广会员成员</p></div>
      <div class="teamreport" @click="$router.push({ name: 'AgentReport'})"><i class="van-badge__wrapper van-icon van-icon-undefined iconfont-tdbb"
                                 style="font-size: 20px;">
      </i>
        <p>团队报表</p></div>
    </div>
    <div class="agent-items">
      <div class="item van-hairline--bottom" style="display: none">
        <div class="left">推广管理</div>
        <i class="van-badge__wrapper van-icon van-icon-arrow" style="font-size: 5px;">
        </i></div>
      <div class="item van-hairline--bottom" @click="$router.push({ name: 'BetList' })">
        <div class="left">代理打赏明细</div>
        <i class="van-badge__wrapper van-icon van-icon-arrow" style="font-size: 5px;">
        </i></div>
      <div class="item van-hairline--bottom" @click="$router.push({name: 'TransactionList'})">
        <div class="left">代理交易明细</div>
        <i class="van-badge__wrapper van-icon van-icon-arrow" style="font-size: 5px;">
        </i></div>
    </div>
  </div>
</template>
<script>
import {mapGetters} from "vuex";

export default {
  name: "AgentCenter",
  computed: mapGetters(["userInfo"]),
  data: function () {
    return {}
  }
};
</script>
<style scoped>
::v-deep .van-nav-bar__left > i, ::v-deep .van-nav-bar__text, ::v-deep .van-nav-bar__title, ::v-deep .van-cell__title {
  color: var(--van-nav-bar-icon-color);
}

.agentcenter {
  height: 100%;
  background-color: #f4ebf3
}

.agentcenter .header {
  background: linear-gradient(90deg, #fff, #fff);
  height: 3.2rem
}

.agentcenter .header .van-nav-bar {
  background-color: transparent
}

.agentcenter .header .user-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: .26667rem .53333rem;
  background-color: #f5dcf1
}

.agentcenter .header .user-wrapper .avatar-error-img {
  width: 1.33333rem;
  height: 1.33333rem;
  border-radius: 50%
}

.agentcenter .header .user-wrapper .userinfo {
  padding-left: .26667rem
}

.agentcenter .header .user-wrapper .userinfo .username {
  font-size: .48rem;
  color: #fa59b5
}

.agentcenter .header .user-wrapper .userinfo .balance {
  font-size: .42667rem;
  color: #fa59b5
}

.agentcenter .items-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: .4rem 0;
  background-color: #f5dcf1
}

.agentcenter .items-bar .member, .agentcenter .items-bar .myqrcode, .agentcenter .items-bar .teamreport {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fa59b5
}

.agentcenter .items-bar .member p, .agentcenter .items-bar .myqrcode p, .agentcenter .items-bar .teamreport p {
  padding-top: .13333rem;
  color: #fa59b5
}

.agentcenter .agent-items {
  padding: 0 .4rem;
  margin-top: .26667rem;
  background-color: #f5dcf1
}

.agentcenter .agent-items .item {
  padding: .37333rem 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: .37333rem;
  color: #fa59b5;
  border-bottom: .02667rem solid #fa59b5
}

.agentcenter .agent-items .item .van-icon {
  color: #000
}

</style>
